*{padding: 0;margin: 0;}
.frame{
    width:100%;
    height: 600px;
    background:url('../images/bg.jpg') ;
    background-size: cover;
    background-position: center;
}
.frame::before{
    content: "";
    display: table;
}
.content{
    margin: 80px auto;
    width:300px;
    height:470px;
}
.search{
    width:200px;
    height:50px;
    border-radius: 30px;
    border: none;
    opacity:0.5;
    padding-left: 20px;
}
.search:hover{
    outline: none;
}
.but{
    width:70px;
    height: 50px;
    border-radius: 15px;
    opacity:0.5;
    border:none;
}
.pic{
    margin: 20px auto;
    border-radius: 50%;
    animation:animated 5s linear infinite;
    outline:none;
    box-shadow:0px 0px 26px 21px   #fff;
}
@keyframes animated{
    0%{
        transform:rotate(0deg);
        /* box-shadow:0px 0px 250px 10px   rgb(252, 252, 252); */
    }
    25%{
        transform:rotate(90deg) ;
        /* box-shadow:0px 0px 150px 100px   rgb(221, 204, 109); */
    }
    50%{
        transfrom:rotate(180deg);
        /* box-shadow:0px 0px 500px 150px   rgb(205, 223, 214); */
    }
    75%{
        transfrom:rotate(270deg);
        /* box-shadow:0px 0px 250px 800px   rgba(197, 245, 85, 0.342); */
    }
    100%{
        transform:rotate(360deg);
        /* box-shadow:0px 0px 100px 10px   rgba(201, 199, 102, 0.877); */
    }
}
h4{
    text-align: center;
}
audio{
    opacity:0.5;
}